// @flow
import React, { Component } from 'react';
import { Icon, Menu, Dropdown } from 'antd';
import './LeftMenu.scss';

type Props = {};

class LeftMenu extends Component<Props> {
  render() {
    return (
      <div className="LeftMenu">
        <div className="menu-Log">MetLog.</div>
        <div className="menu-item-rec">
          <a rel="noopener noreferrer" href="">
            Home
          </a>
        </div>
        <div className="menu-item-rec">
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/inbox">
                    <Icon type="inbox" theme="outlined" />
                    Inbox
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/things/action">
                    <Icon type="ordered-list" theme="outlined" />
                    Action
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/things/context">
                    <Icon type="tags" theme="outlined" /> Context
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/things/calendar">
                    <Icon type="calendar" theme="outlined" /> Calendar
                  </a>
                </Menu.Item>

                <Menu.Item>
                  <a rel="noopener noreferrer" href="/things/flag">
                    <Icon type="flag" theme="outlined" />
                    Flag
                  </a>
                </Menu.Item>
              </Menu>
            }
          >
            <a className="ant-dropdown-link" href="#">
              Things <Icon type="down" />
            </a>
          </Dropdown>
        </div>
        <div className="menu-item-rec">
          <a rel="noopener noreferrer" href="">
            Blog
          </a>
        </div>
        <div className="menu-item-rec">
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/pay/AccountingSubject">
                    Accounting subject
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/pay/list">
                    Pay List
                  </a>
                </Menu.Item>
                <Menu.Item>
                  <a rel="noopener noreferrer" href="/pay/Reporter">
                    Reporter
                  </a>
                </Menu.Item>
              </Menu>
            }
          >
            <a className="ant-dropdown-link" href="#">
              Pay <Icon type="down" />
            </a>
          </Dropdown>
        </div>
      </div>
    );
  }
}

export default LeftMenu;
